<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">社团管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>人员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  输入框组-->
    <div>
      <br/>
      <span>姓名 &nbsp;&nbsp;</span>
      <el-input
          placeholder="请输入姓名"
          prefix-icon="el-icon-search"
          v-model="name" class="inputMax" >
      </el-input>
      <span>&nbsp;&nbsp;职位&nbsp;&nbsp;</span>
      <el-select v-model="position" placeholder="请选择" class="inputMax">
        <el-option
            v-for="item in positions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      &nbsp;&nbsp;
      <el-button type="primary" icon="el-icon-search" @click="personSearch" ><span>查询</span></el-button>
      <el-button type="success" @click="openAddPerson" icon="el-icon-plus">添加</el-button>
      <el-button type="primary" @click="doWriteExcel" icon="el-icon-download" style="float: right">导出</el-button>
      <el-upload
          class="upload-demo"
          style="float: right"
          action="none"
          :limit="1"
          :on-change="toFile"
          :auto-upload="false">
        <el-button  type="primary" icon="el-icon-upload2">导入</el-button>
      </el-upload>
      <br/>
      <br/>
    </div>
    <el-table
        :data="clubPersons.list"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="ID"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="100">
      </el-table-column>
      <el-table-column
          prop="position"
          label="职位">
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱">
      </el-table-column>
      <el-table-column
          fixed="right"
          width="180"
          label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="personUpdate(scope.row.id)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="open(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="clubPersons.pageSize"
        @current-change="toPage"
        :total="clubPersons.total">
    </el-pagination>

    <el-dialog title="人员信息" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth" style="float: left">
          <el-input v-model="form.name" autocomplete="off" style="width: 200px;float: left"></el-input>
        </el-form-item>
        <el-form-item label="职位" :label-width="formLabelWidth" style="float: left">
          <el-select v-model="form.position" placeholder="请选择身份" style="width: 200px;float: left">
            <el-option label="社长" value="社长"></el-option>
            <el-option label="副社长" value="副社长"></el-option>
            <el-option label="社员" value="社员"></el-option>
          </el-select>
        </el-form-item>
        <br/>
        <el-form-item label="邮箱" :label-width="formLabelWidth" style="float: left">
          <el-input v-model="form.email" autocomplete="off" style="width: 400px;float: left"></el-input>
        </el-form-item>
      </el-form>
      <br/>
      <br/>
      <br/>
      <br/>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="personInsert">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  clubPersonList,
  clubPersonInsert,
  clubPersonById,
  clubPersonUpdate,
  clubPersonDelete,
  readExcel,
} from '@/api'
export default {
  name: "PersonList",
  components: {
  },
  data() {
    return {
      name: '',
      positions: [
        {
          value: '',
          label: ''
        }, {
          value: '社长',
          label: '社长'
        }, {
          value: '副社长',
          label: '副社长'
        }, {
          value: '社员',
          label: '社员'
        }],
      position: '',
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        position:'',
        email:'',
        id: 0
      },
      formLabelWidth: '60px',
      clubPersons: [],
      c_id: sessionStorage.getItem('cid'),
      file:null,
    }
  },

  created() {
    let clubPerson = {
      c_id: sessionStorage.getItem('cid'),
    }
    clubPersonList(clubPerson).then((result)=>{
      this.clubPersons  = result.data;
    });
  },

  methods: {
    toPage(page){
      let clubPerson = {
        c_id: this.c_id,
        pageNum:page,
      }
      clubPersonList(clubPerson).then((result)=>{
        this.clubPersons  = result.data;
      });
    },

    openAddPerson(){
      this.dialogFormVisible = true;
      this.form = {
        name: '',
        position:'',
        email:'',
        id: 0
      };
    },

    personSearch(){
      let clubPerson = {
        name: this.name,
        position: this.position,
        c_id: sessionStorage.getItem('cid'),
      };
      clubPersonList(clubPerson).then((result)=>{
        this.clubPersons  = result.data;
      })
    },

    // 根据情况 判断插入还是更新
    personInsert(){
      let clubPerson = {
        name: this.form.name,
        position: this.form.position,
        email: this.form.email,
        c_id: this.c_id
      };
      this.dialogFormVisible = false;
      let club = {
        c_id: this.c_id
      }
      if (this.form.id === 0){
        clubPersonInsert(clubPerson).then(()=>{
          clubPersonList(club).then((result)=>{
            this.clubPersons  = result.data;
          })
        });
      }else {
        clubPerson.id = this.form.id;
        this.form.id = 0;
        clubPersonUpdate(clubPerson).then(()=>{
          clubPersonList(club).then((result)=>{
            this.clubPersons  = result.data;
          })
        })
      }
    },

    personUpdate(id){
      this.dialogFormVisible = true;
      let clubPerson = {
        id: id,
        c_id: this.c_id
      }
      clubPersonById(clubPerson).then((result)=>{
        this.form = result.data;
      })
    },

    open(id) {
      this.$confirm('此操作将永久删除该社员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let clubPerson = {
          id: id,
        };
        let club = { c_id: this.c_id}
        clubPersonDelete(clubPerson).then(()=>{
          clubPersonList(club).then((result)=>{
            this.clubPersons  = result.data;
          })
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 上传文件
    toFile(file){
      this.file = file;
      console.log(file);
      let formData = new FormData();
      formData.append("personFile",file.raw);
      formData.append("c_id",this.c_id);
      readExcel(formData).then(()=>{
        let clubPerson = {
          c_id: this.c_id,
        }
        clubPersonList(clubPerson).then((result)=>{
          this.clubPersons  = result.data;
        });
      });
    },

    // 导出文件，通过a标签来请求后端。
    doWriteExcel(){
      const link = document.createElement('a')
      link.href = "http://localhost:8081/writeExcel?c_id="+this.c_id;
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

<style scoped>
.inputMax{
  width: 200px;
}
</style>
